<template>
    <div>
        <div class="search">
        <input v-model="keyword" class="search-input" type="text" 
            placeholder="输入城市名或拼音">
        </div>
        <div class="search-content" ref="search" v-show='keyword'>
            <ul>
                <li 
                    class="search-item border-bottom" 
                    v-for='item of list' 
                    :key="item.id"
                    @click="handleCityClick(item.name)"
                >
                    {{item.name}}
                </li>
                <!-- 优化 模板中尽量不要有逻辑，用computed的hasNoData替代 -->
                <li class="search-item border-bottom" v-show="hasNoData">没有找到匹配数据</li>
            </ul>
        </div>
    </div>
    
</template>

<script>
import Bscroll from 'better-scroll'
import {mapMutations} from 'vuex'
export default {
    name: "CitySearch",
    props: {
        cities: Object
    },
    data () {
        return {
            keyword: '',
            list:[],
            timer: null
        }
    },
    computed: {
        hasNoData () {
            return !this.list.length
        }
    },
    watch: {
        keyword () {
            if(this.timer) {
                clearTimeout(this.timer)
            }
            if(!this.keyword){
                this.list = []
                return 
            }
            this.timer = setTimeout(() => {
                const result = []
                for(let i in this.cities) {
                    this.cities[i].forEach((value) => {
                        if (value.spell.indexOf(this.keyword) > -1 ||
                            value.name.indexOf(this.keyword) > -1) {
                                result.push(value)
                        }
                    })
                }
                this.list = result
            }, 100);
        }
    },
    mounted () {
        this.scroll = new Bscroll(this.$refs.search)
    },
    updated () {
        this.scroll.refresh()
    },
    methods : {
        handleCityClick(city){
            this.$store.commit('changeCity', city)
            // 这里是使用vue router的方法 进行页面跳转
            this.$router.push('./')
        },
        handleCityClick(city){
            // 使用vuex里面的方法 dispatch
            // 这里可以直接越过actions，使用commit直接调用mutations
            this.changeCity(city)
            this.$router.push('./')
        },
        // 下面这一行代码使得changeCity就直接代表了vuex中的changeCity方法，
        // 就直接可以将上面的this.$store.commit('changeCity', city)简化为this.changeCity(city)
        ...mapMutations(['changeCity'])
    }
}
</script>

<style lang='stylus' scoped>
    @import '~styles/varibles.styl'
    .search
        padding: 0 .1rem
        height: .72rem
        background: $bgColor
        .search-input
            box-sizing: border-box
            padding: .1rem  
            width: 100%
            height: .62rem
            line-height: .62rem
            text-align: center
            border-radius: .06rem
            color: #666
    .search-content
        z-index: 1
        overflow: hidden
        position: absolute
        top: 1.58rem
        left: 0
        right: 0
        bottom: 0
        background: #eee
        .search-item
            line-height: .62rem
            padding-left: .2rem
            color: #666
            background: #fff
</style>